var bannerLeft = document.querySelector('.banner-left');
var bannerRight = document.querySelector('.banner-right');
var bannerUl = document.querySelector('.banner-ul');

var flag = false;

bannerLeft.onclick = function() {
	clearInterval(timer);
	left();
	timer = setInterval(right, 5000);
}
bannerRight.onclick = function() {
	clearInterval(timer);
	right();
	timer = setInterval(right, 5000);
}

function left(step) {
	var bannerLi = document.querySelector('.banner-ul li');
	var step = bannerLi.offsetWidth / 16;
	var left = parseFloat(bannerUl.style.marginLeft) + step;
	if(left >= 0) {
		flag = true;
	}
	bannerUl.style.marginLeft = left + 'rem';
	if(flag) {
		setTimeout(function() {
			bannerUl.style.transition = 'all 0s';
			bannerUl.style.marginLeft = -(8 * step) + 'rem';
			flag = false;
		}, 500)
	}
	bannerUl.style.transition = 'all 0.5s';
}

function right() {
	var bannerLi = document.querySelector('.banner-ul li');
	var step = bannerLi.offsetWidth / 16;
	var right = parseFloat(bannerUl.style.marginLeft) - step;
	if(right <= -(9 * step)) {
		flag = true;
	}
	bannerUl.style.marginLeft = right + 'rem';
	if(flag) {
		setTimeout(function() {
			bannerUl.style.transition = 'all 0s';
			bannerUl.style.marginLeft = -step + 'rem';
			flag = false;
		}, 500)
	}
	bannerUl.style.transition = 'all 0.5s';
}

var timer = setInterval(right, 5000);